<!DOCTYPE HTML>
<html>
    <meta charset="utf-8">
    <head>
  <title>js手表项目</title>
  <style>
	  	  @keyframes rotate {
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}
.box1{width: 280px;height: 280px;background: #000000; border-radius: 90%;}
.h{color: #ffffff;padding-top: -10px;text-align: center;}
.hmtp{width: 80px;height: 80px;}.tp{ padding-left: 100px;border-radius:50%;padding-top: 20px;}
.s1{width: 80px;height: 80px;width: 80px;height: 80px;animation: rotate 2s linear infinite;}.s2{animation: rotate 4s linear infinite;}.s3{width: 80px;height: 80px;animation: rotate 6s linear infinite;}

		</style>
    
  </head>
    <body>
        
<div class="box1">
	<div class="tp"><img src="hm.png" class="hmtp" id="img" /></div><br>
	<div class="h">
    <nobr id="hx"></nobr><nobr id="sjian"></nobr>
    <p id="djs">还剩下xx秒，加油！</p>
<h2 onclick="tz()">点击重新开始</h2>
</div>
</div>

     
 <script>
     function tz(){
         location.href='index.html';
     }
  console.log("接收到左边选择器的值为："+window.localStorage.getItem('t1'));
  console.log("接收到右边选择器的值为："+window.localStorage.getItem('t2'));
  var t4=window.localStorage.getItem('t2');
  if(t4=="较慢"){var u=6;}else if(t4=="舒缓"){var u=4;}else if(t4=="较快"){var u=2;}
  var a=window.localStorage.getItem('t1');
  var b=12;
  var c=b;
  var d=0;
  document.getElementById("djs").innerHTML = "还剩下"+b+"秒，加油！";
  time();
  function time() {
      
       d=(c-b)/c;
       if(b===0){
           document.getElementById("djs").innerHTML = "已完成(100%)";
		   document.getElementById("hx").innerHTML = "";
           document.getElementById("sjian").style.display="none";
		    document.getElementById("img").class="hmtp";
           document.getElementById("hx").innerHTML = "";
		   document.getElementById('img').className='hmtp';
       }else{
setTimeout("time()", 1000)
		   if(u===6){document.getElementById('img').className='s3';}
		   else if(u===4){document.getElementById("img").className="s2";}
		   else if(u===2){document.getElementById("img").className="s1";}
    document.getElementById("djs").innerHTML = "还剩下"+b+"秒，加油！";
		    b=b-1;
	  }
  }
  time1();
  function time1() {
	  var r=(b/u)+1;
	   if(r%2===0){
    document.getElementById("hx").innerHTML = "吸气";
   }else{document.getElementById("hx").innerHTML = "呼气";}if(r===0){document.getElementById("hx").innerHTML = "";
	   }else{
	    setTimeout("time1()", u*1000); r=r-1;}}
  
 </script>


<script>
      var e=u*10;
    time2();
  
function time2() {
    --e;
    var t=(u*10)-e;
    var k=t/(u*10);
    if(e==0){
        e=(u*10);
    }
    document.getElementById("sjian").innerHTML ="("+ Math.trunc(k*100)+"%"+")";
    console.log("1");
	    setTimeout("time2()",100);}
</script>

        
    </body>
</html>